<template>
    <div>
        <div class="ge_content">
            <div class="ge_content_left" style="display:flex">
                <!-- <chooseStatusBotton  @updateclick='updateclick' :status='this.form.status|textfilters'></chooseStatusBotton>
                 <span  style="font-size: 14px;margin-right:16px;margin-left:16px">{{this.form.status|textfilters}}</span> -->
                <span class="ge_content_left_name">{{form.name}}</span>
                <span class="ge_content_left_span" v-for="element in  form.tags">{{element.name}}</span>
                <!-- <span class="ge_content_left_span">外包</span> -->
                <!-- <span style="font-size: 14px;margin-right:16px">产品编号：<strong class="strong_text">P1000</strong></span> -->
                <!-- <span style="font-size: 14px;">产品负责人：<span class="strong_text_name">{{form.masterName}}</span></span> -->
            </div>
            <div>
                <el-button type="primary" @click="delectclick" class="ge_content_right_button">删除</el-button>
            </div>
        </div>
        <div class="details-content-fields">
            <div class="details-content-fields-row">
                <div class="details-content-fields-row-item">
                    <span class="details-content-fields-row-item-label">负责人 / 成员</span>
                    <div class="details-content-fields-row-item-right">
                        <span class="details-content-type">{{form.masterName}}</span>
                        <span v-if="form.masterName && form.userList.length > 0" class="details-content-type" style="margin-left:10px;margin-right:10px">/</span>
                        <template v-for="(item,index) in form.userList">
                            <span class="details-content-type">{{item.userName}}</span>
                            <span v-if="index != form.userList.length-1" class="details-content-type">、</span>
                        </template>
                    </div>
                </div>
                <div class="details-content-fields-row-item">
                    <span class="details-content-fields-row-item-label">创建时间</span>
                    <div class="details-content-fields-row-item-right">
                        <span class="details-content-type">{{form.createTime}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="produce_content_right">
            <el-row :gutter="24">
                <el-col :span="5">
                    <div class="grid_content bg-purple">
                        <div class="grid_content_block" style="width:80%">
                            <div class="grid_content_span">产品版本</div>
                            <div class="grid_content_number">{{verNum?verNum:'0'}}</div>
                        </div>
                        <!-- <div class="grid_content_block">
                            <div class="grid_content_span">物料数</div>
                            <div class="grid_content_number">{{bomNum?bomNum:"0"}}</div>
                        </div> -->
                    </div>
                </el-col>
                <el-col :span="1">
                    <div> &nbsp</div>
                </el-col>
                <el-col :span="15">
                    <div class="grid_content bg-purple">
                        <div class="grid_content_block">
                            <div class="grid_content_span">样机生产与试制</div>
                            <div class="grid_content_number">{{management}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">产品资料</div>
                            <div class="grid_content_number">{{information}}</div>
                        </div>
                        <div class="grid_content_block">
                            <div class="grid_content_span">产品交接</div>
                            <div class="grid_content_number">{{handover}}</div>
                        </div>

                        <div class="grid_content_block">
                            <div class="grid_content_span">用户项目</div>
                            <div class="grid_content_number">{{usernumber}}</div>
                        </div>

                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { del, summarize,prodChange } from "@/api/prod";
import chooseStatusBotton from './prodStatus'
export default {
    props: ["form"],
    data() {
        return {
            usernumber: 0, //用户项目
            handover: 0, //产品交接
            information: 0, //产品资料
            management: 0, //生产管理
            verNum: 0, //产品版本
            bomNum: 0, //物料数
            functionIndex: 0,
            listQuery: {
                current: 1,
                size: 10,
                docType: "00",
                dirId: "",
                deleted: 0,
                isUpdate: 0,
                isMyCreate: 0,
                name: "",
            },
            drawer: false,
        };
    },
    filters: {
      textfilters(val){
      if(val=='00'){return '导入期'}
      else if(val=='01'){return '成长期'}
      else if(val=='02'){return '成熟期'}
      else if(val=='03'){return '衰退期'}
      else if(val=='04'){return '已关闭'}
    },
     },
    watch: {
        form: {
            handler(val, oldval) {
                this.form = val;
            },
            // 深度观察监听
            deep: true,
            immediate: true,
        },
    },
    components:{
        chooseStatusBotton
    },
    mounted() {
        this.summarizeclick()
    },
    methods: {
        updateclick(data){
            let params=new URLSearchParams()
            params.append('prodId',this.form.prodId)
            params.append('status',data)
             prodChange(params).then(res=>{
                 this.form.status=data
                 this.$message("修改成功")
             })
         },
        async summarizeclick() {
            let params = new URLSearchParams();
            params.append("prodId", this.$route.query.prodId);
            let res = await summarize(params);
            this.bomNum = res.data.bomNum;
            this.verNum = res.data.verNum;
            res.data.docTotalVos.forEach((item) => {
                if (item.docSubtype == "00") {
                    this.management = item.taskNum;
                } else if (item.docSubtype == "01") {
                    this.information = item.taskNum;
                } else if (item.docSubtype == "02") {
                    this.handover = item.taskNum;
                } else if (item.docSubtype == "03") {
                    this.usernumber = item.taskNum;
                }
            });
        },
        delectclick() {
            const params = new URLSearchParams();
            params.append("ids", this.$route.query.prodId);
            this.$confirm("确认删除?(有子产品时不可删除)", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                del(params).then((res) => {
                    this.$message("删除成功!");
                    this.$store
                        .dispatch("tagsView/delView", this.$route)
                        .then(({ visitedViews }) => {
                            this.$router.push({ path: "/produce/index" });
                        }); // 关闭当前tab回到列表
                });
            });
        },
    },
};
</script>
 <style scoped>
.ge_content {
    width: 100%;
    /* height: 10px; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 16px;
}
.ge_content_left {
    display: flex;
    align-items: flex-end;
}
.ge_content_left_span {
    border-radius: 5px;
    padding: 2px;
    font-size: 12px;
    display: block;
    color: #2c7ef8;
    border-color: #2c7ef8;
    border: solid 1px #2c7ef8;
    margin-right: 16px;
}
.strong_text {
    color: rgb(46, 64, 94);
    font-weight: 700;
    font-size: 14px;
}
.strong_text_name {
    color: rgb(44, 126, 248);
    font-size: 14px;
}
.produce_content_right {
    width: 100%;
}
.produce_production_left_div {
    padding: 14px;
    border: 1px solid rgb(236, 237, 240);
}
.grid_content {
    width: 100%;
    padding: 24px;
    border-color: #ecedf0;
    height: 120px;
    border: 1px solid rgb(236, 237, 240);
    display: flex;
    justify-content: space-between;
}
.grid_content_block {
    width: 45%;
    height: 76px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
}
.grid_content_block:hover {
    background-color: rgb(245, 246, 248);
}
.grid_content_span {
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: rgb(46, 64, 94);
    text-align: center;
    /* width: ; */
}
.grid_content_number {
    font-size: 24px;
    font-weight: 600;
    color: rgb(46, 64, 94);
    font-family: fangsong;
}
.details-content-fields {
    flex: 1;
    padding: 8px 16px;
    background-color: #fafbfb;
    margin-top: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.details-content-fields-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 36px;
}

.details-content-fields-row-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-content-fields-row-item-label {
    width: 100px;
    display: block;
    font-size: 12px;
    margin-right: 16px;
    color: #333333;
}

.details-content-fields-row-item-right {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
}

.details-content-fields-row-item-rightTwo {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.item-personInCharge-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}

.item-personInCharge-title {
    font-size: 12px;
    color: #333333;
    man-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-personInCharge-logo-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-personInCharge-logo-icon {
    font-size: 12px;
    color: #333333;
    margin-right: 5px;
    margin-left: 5px;
}

.details-content-date {
    font-size: 12px;
    color: #333333;
}

.details-content-date-icon {
    color: #909aaa;
    font-size: 16px;
    margin-left: 18px;
    margin-right: 18px;
    margin-top: 1px;
}
.details-content-type {
    font-size: 12px;
    color: #333333;
}
.details-content-time-title {
    font-size: 12px;
    color: #333333;
}
.details-content-project-icon {
    font-size: 12px;
    color: #909aaa;
    margin-right: 4px;
    margin-top: 2px;
}

.details-content-project-title {
    font-size: 12px;
    color: #909aaa;
}
.ge_content_left_name{
    font-size: 24px;
    font-weight: 700;
}
</style>
